<template>
  <div class="app-container" style="max-width: 1080px;margin: 0 auto">
    <el-card class="box-card" style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <span class="title">平台概况</span>
      </div>
      <div class="basic-info" v-loading="loading">
        <ul class="basic-info-part right-border">
          <li class="item" @click="goToView('/config/site')">
            <div class="label">站点</div>
            <div class="value">{{basicInfo.siteCount}}</div>
          </li>
          <li class="item" @click="goToView('/config/room')">
            <div class="label">机房</div>
            <div class="value">{{basicInfo.roomCount}}</div>
          </li>
          <li class="item" @click="goToView('/deviceManage/product')">
            <div class="label">产品</div>
            <div class="value">{{basicInfo.productCount}}</div>
          </li>
        </ul>
        <ul class="basic-info-part right-border">
          <li class="item" @click="goToView('/deviceManage/deviceM')">
            <div class="label">设备总数</div>
            <div class="value">{{basicInfo.deviceCount}}</div>
          </li>
          <li class="item" @click="goToView('/deviceManage/deviceM')">
            <div class="label">在线设备</div>
            <div class="value">{{basicInfo.onlineDeviceCount}}</div>
          </li>
          <li class="item" @click="goToView('/deviceManage/deviceM')">
            <div class="label">离线设备</div>
            <div class="value">{{basicInfo.offlineDeviceCount}}</div>
          </li>
        </ul>
        <ul class="basic-info-part">
          <li class="item" @click="goToView('/deviceManage/deviceM')">
            <div class="label">正常设备</div>
            <div class="value">{{basicInfo.normalDeviceCount}}</div>
          </li>
          <li class="item" @click="goToView('/alarm/alarmLog')">
            <div class="label">告警设备</div>
            <div class="value">{{basicInfo.alarmDeviceCount}}</div>
          </li>
          <li class="item" @click="goToView('/alarm/alarmLog')">
            <div class="label">当前告警</div>
            <div class="value">{{basicInfo.alarmCount}}</div>
          </li>
        </ul>

      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">告警情况</span>
      </div>
      <div class="room-alarm" v-loading="loading">
        <div class="item " :class="{'right-border': index%2===0}" v-for="(item,index) in basicInfo.roomAlarmList"
             :key="item.id"
             @click="goToView('/monitorCenter/room', {roomId: item.id})"
        >
          <div class="name" style="flex: 3">{{item.name}}</div>
          <div style="flex: 2">
            <div class="label">告警设备数</div>
            <div class="value">{{item.alarmDeviceCount}}</div>
          </div>
          <div style="flex: 2">
            <div class="label">当前告警数</div>
            <div class="value">{{item.alarmCount}}</div>
          </div>

        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  import {basicInfo} from "@/api/biz/statistics";

  export default {
    data() {
      return {
        loading: false,
        timer: null,
        basicInfo: {
          roomAlarmList: []
        },
      }
    },
    beforeMount() {
      this.getData();
      this.timer = setInterval(this.getData, 30 * 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      getData() {
        this.loading = true;
        basicInfo().then(res => {
          this.basicInfo = res.data;
        }).finally(() => {
          this.loading = false;
        })
      },
      goToView(path, query = {}) {
        console.log(path, query);
        this.$router.push({path: path, query: query});
      }
    }
  }
</script>
<style scoped lang="scss">
  .title {
    font-size: 14px !important;
    font-weight: bold;
    color: #555;
  }

  .right-border {
    border-right: 1px solid #ddd;
  }

  .basic-info {
    display: flex;
    flex-direction: row;
    font-size: 16px;

    .basic-info-part {
      flex: 1;
      margin: 0;
      padding: 0;

      .item {
        display: flex;
        flex-direction: row;
        padding: 20px;

        .label {
          width: 50%;
          font-weight: bold;
          text-align: center;
          color: #555;
        }

        .value {
          width: 50%;
          text-align: left;
          flex: 1;
          padding-left: 50px;
        }
      }

    }
  }

  .room-alarm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .item {
      width: 50%;
      display: flex;
      padding: 30px 40px 30px 0;
      font-size: 16px;
      align-items: center;
      /*border: 1px solid #ddd;*/

      .name {
        text-align: center;
        font-weight: bold;
        color: #555;
      }

      .label {
        text-align: center;
        /*padding-bottom: 10px;*/
        font-weight: bold;
        font-size: 14px;
        color: #555;
        display: inline-block;
        margin-right: 10px;
      }

      .value {
        text-align: center;
        display: inline-block;
      }
    }
  }

  .value {
    color: #409eff;

    font-weight: bold;
  }

  .item:hover {
    background-color: #efefef;
    cursor: pointer;
  }
</style>
